<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>任务列表</title>
    <script src="https://cdn.bootcss.com/babel-polyfill/7.4.4/polyfill.js"></script>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <script src="${ctx}/js/changeSize.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }

    .task_list {
        padding: 0.5rem;
    }

    .task_header {
        background: #2D90B0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        color: #fff;
        height: 2.6rem;
        line-height: 2.6rem;
        font-size: 1rem;
    }

    .task_header .comeback {
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: 50%;
        transform: translateY(-50%);
        left: 0.5rem;
    }

    .record {
        position: absolute;
        right: 0;
        top: 0;
        width: 2.6rem;
        height: 2.6rem;
    }

    .task_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 4px;
        padding: 0.5rem;
        box-shadow: 2px 2px 8px 2px rgba(49, 49, 49, 0.22);
        margin-bottom: 0.5rem;
    }

    .task_detail {
        display: flex;
    }

    .task_detail img {
        margin-right: 0.6rem;
        width: 2.8rem;
        height: 2.8rem;
    }

    .task_detail div {
        padding-top: 0.4rem;
    }

    .title {
        margin-bottom: 0.4rem;
        font-size: 0.84rem;
    }

    .describe {
        font-size: 0.65rem;
        color: #ACAEAD;
    }

    .describe i {
        color: #ff541f;
    }

    .get_money {
        display: flex;
        align-items: center;
        color: #ff541f;
        font-size: 1rem;
    }

    .get_money i {
        font-weight: 600;
        font-size: 0.5rem;
    }

    .get_money span{
        font-weight: 600;
    }
</style>
<body>
<div id="app">
    <div class="task_list" v-cloak>
        <div class="task_box" v-for="(item,index) in taskList" :key="index"
             @click="gotoDetail(item.category,item.taskId,item.needCheck)">
            <div class="task_detail">
                <img :src="item.icon">
                <div>
                    <p class="title">{{item.title}}</p>
                    <p class="describe">任务预计耗时<i>{{item.time}}分钟</i>剩余{{item.size}}份</p>
                </div>
            </div>
            <div class="get_money">
                <i>+</i>
                <span>{{item.label}}</span>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            taskList: []
        },
        mounted: function () {
            this.getTask();
            window.refreshList = this.refreshList;
            window.goRecordList = this.goRecordList;
            window.xy_web.setActivityTitle('任务列表');
            window.xy_web.showAndHideRecord(true);
        },
        methods: {
            // 获取列表信息
            getTask: function () {
                var that = this;
                var header = window.xy_web.getNetHeader();
                $.ajax({
                    url: "/web/task/list",
                    type: 'post',
                    async: false,
                    headers: JSON.parse(header),
                    // headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"8f5cbd2a-f22d-4205-a7af-be2880a24a5b","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        if (res) {
                            that.taskList = res.data;
                        } else {
                            console.log('fail');
                        }
                        window.xy_web.closeRefresh();
                    }
                });
            },

            // 跳转详情页
            gotoDetail: function (type, id, status) {
                window.xy_web.showLoading();
                if (type === 'Common' || type ==='Redbook') {
                    // if (type === 'Soso') {
                    //     window.location.href = '/web/api/task/' + (!status && type === 'Soso'?'sosodetail':'checksoso') + '?type=' + type + '&taskId=' + id;
                    // }else {
                    //     window.location.href = '/web/api/task/taskdetail?type=' + type + '&taskId=' + id;
                    // }
                    window.location.href = '/web/api/task/taskdetail?type=' + type + '&taskId=' + id;
                } else {
                    window.location.href = "/web/api/task/comments?type=" + type + '&taskId=' + id;
                }
            },

            // 返回上一页
            comeback: function () {
                window.history.back(-1);
            },

            // 刷新数据
            refreshList: function () {
                this.getTask();
            },

            // 前往任务记录列表
            goRecordList: function () {
                window.location.href = "/web/api/task/detaillist";
            }
        }
    });
</script>
